<template>
	<view class="search-content" :style="{background: bgColor}" @click="tapSearch">
		<text class="search-icon-search iconfont iconsearch" :style="{color: color}"></text>
		<input class="search-icon-input" :placeholder="placeholder" v-model="inputContent" :placeholderStyle="placeholderStyle" type="text" />
	</view>
</template>

<script>
	export default{
		data() {
			return {
				placeholderStyle: "font-size: 30rpx; color: #c0c0c0; font-weight: 400",
				inputContent: "",
			};
		},
		methods: {
			/* 点击搜索框 */
			tapSearch() {
				uni.navigateTo({
					url: "/pages/recommend/searchCenter"
				})
			}
		},
		props: {
			bgColor: {
				type: String,
				default: "#ffffff"
			},
			color: {
				type: String,
				default: "#acacac"
			},
			placeholder: {
				type: String,
				default: "有事没事搜一搜"
			}
		}
	}
</script>

<style lang="less" scoped>
	.search-content{
		padding: 0 10rpx;
		flex: 1;
		border-radius: 7rpx;
		height: 65rpx;
		.search-icon-search{
			align-items: center;
			font-size: 50rpx;
		}
		.search-icon-input{
			flex: 1;
			height: 65rpx;
		}
	}
</style>
